<template>
    <div id="login">
       <div class="login_box">
           <div class="login_img">
               <img src="../assets/logo.png" alt="">
           </div>
           <el-form :model='loginForm' :rules="rules" ref="loginForm" label-width="0px" class="login_form">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user" placeholder="用户名"></el-input>
                </el-form-item>
                 <el-form-item prop="password">
                    <el-input v-model="loginForm.password"  prefix-icon="iconfont icon-mima" placeholder="密码" type="password"></el-input>
                </el-form-item>
                 <el-form-item class="login_btn">
                    <el-button   type="success" @click="handleLogin">登录</el-button>
                    <el-button   type="info" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 6, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleLogin () {
      // validate 验证表单
      this.$refs.loginForm.validate(async val => {
        console.log(val)
        if (!val) return false
        const { data: res } = await this.$http.post('login', this.loginForm)
        if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
        this.$message.success(res.meta.msg)
        console.log(res)
        sessionStorage.setItem('token', JSON.stringify(res.data.token))
        this.$router.push('/home')
      })
    },
    handleReset () {
      console.log(this)
      this.$refs.loginForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
#login {
  background: #2b4b6b;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .login_box {
      width: 450px;
      height: 300px;
      background-color: #fff;
      border-radius: 10px;
      position: relative;
      .login_img {
          background-color: #fff;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          border: 1px solid #ccc;
          padding: 10px;
          position:absolute;
          left: 50%;
          top: 0;
          transform: translate(-50%,-50%);
          box-shadow: 0 0 10px #ddd;
        //   overflow: hidden;
          img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            //   border: 1px solid #ccc;
              background-color: #ccc;
          }
      }
      .login_form {
          position:absolute;
          bottom: 0;
          width: 100%;
          box-sizing: border-box;
          padding: 0 15px;
          .login_btn {
              display: flex;
              justify-content: flex-end;
          }

      }
  }
}
</style>
